<!--
   xx项目-流程设计
-->
<template>
  <div>
    <el-dialog :title="projectName+'---流程设计'" size="large" v-model="dialogVisible" :before-close="closeDialog"
               v-on:open="onSubmit" :close-on-click-modal="false" >
     <!--  <el-button type="primary" @click="addLinkDialog()" style="margin-bottom: 10px" v-if="collectingState==1">
        <i class="el-icon-plus"></i>新增
      </el-button> -->
      <el-button type="primary" @click="addOneCycles()" style="margin-bottom: 10px" v-if="collectingState==1">
        <i class="el-icon-plus"></i>新增一个周期
      </el-button>
      <!-- <el-button @click="closeDialog" style="float: right;">关闭</el-button> -->
      <div  v-if="collectingState==2">
      <div class="format">
        *请输入服药之后的采血点,如0.5#1#1.25#1.5
      </div>
        <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入采血点，用#拼接"
        v-model="bloodText"
       >
      </el-input>
      <el-button type="primary" @click="Addpoint()" style="float: right;margin-top:20px;">
        <i class="el-icon-plus"></i>添加
      </el-button>
      </div>
      <div style="padding-bottom:20px;margin-top:20px;" v-if="collectingState==1">
        <el-tabs v-model="activeCycles" type="card"  @tab-remove="removeCycles">
          <el-tab-pane
            v-for="(item, index) in cyclesList"
            :closable="index>0"
            :key="'tab_key_'+item.cycles"
            :name="item.cycles+''"
          >
            <!-- <span slot="label">
              {{'周期'+item.cycles}}{{item.emptyStomach==1?'【空腹】':'【非空腹】'}}
            <el-switch
              v-model="item.emptyStomach"
              on-text="空腹"
              :on-value="1"
              off-text="非空腹"
              :off-value="0" @change="updateCyclesEmptyStomach(item)" >
            </el-switch>
            </span> -->
            <span slot="label">
              {{'周期'+item.cycles}}
           <!--  <el-switch
              v-model="item.emptyStomach"
              on-text="空腹"
              :on-value="1"
              off-text="非空腹"
              :off-value="0" @change="updateCyclesEmptyStomach(item)" >
            </el-switch> -->
            </span>
          </el-tab-pane>
        </el-tabs>
        <el-table stripe height="400"
                  :data="flowList"
                  style="width:100%"
                  border>
          <el-table-column
            inline-template
            fixed
            label="序号"
            width="80"
            align="center">
            <span>{{$index + 1}}</span>
          </el-table-column>

          <el-table-column
            property="name"
            label="环节名称"
            align="center">
          </el-table-column>

          <el-table-column
            label="环节类型"
            property="linkTypeName"
            align="center">
          </el-table-column>
          <el-table-column
            property="cycles"
            label="所属周期"
            align="center">
          </el-table-column>

        <!--   <el-table-column
            inline-template
            label="操作"
            fixed="right"
            align="center"
            v-if="$utils.ckUIPower('S01010101')"
            width="300">
            <template v-if="row.linkTypeName.indexOf('离心')==-1"> -->
             <!--  <el-button type="text" v-if="$index !=flowList.length-2" @click.native="bottom(row.sortNo,row.id)">置底
              </el-button> -->
              <!-- <el-button type="text" v-if="$index !=0" @click.native="top(row.sortNo,row.id)">置顶</el-button> -->
             <!--  <el-button type="text" v-if="$index !=0&&row.linkTypeId=='ePx'||row.linkTypeId=='ePQ'" @click.native="up(row.sortNo,row.id)">上移</el-button>
              <el-button type="text" v-if="$index !=flowList.length-3&&row.linkTypeId=='ePx'||row.linkTypeId=='ePQ'" @click.native="down(row.sortNo,row.id)">下移
              </el-button>
            
              <el-button type="text" @click.native="addLinkDialog(row.id)" v-if="row.linkTypeId!='KHu'">修改</el-button>
              <el-popover
                ref="sssss"
                placement="top"
                v-model="visible2"
              >
                <p><i class="el-alert__icon el-icon-warning red"></i>确定要删除【{{row.name}}】吗？</p>
                <div style="text-align: right; margin: 0">
                 
                  <el-button type="primary" size="mini" @click.native.prevent="deleteProcess(row);" >确定
                  </el-button>
                </div>
              </el-popover>
              <el-button type="text" v-popover:sssss size="small" class="red" v-if="row.linkTypeId!='KHu'"><i class="el-icon-delete" ></i>删除
              </el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>

    </el-dialog>
    <link-dialog :link-dialog-visible="linkDialog.show" :project-id="projectId" :process-id="processId"></link-dialog>
  </div>
</template>
<script>
  import http from '../../../api/http'
  import LinkDialog from './link.dialog.vue'

  export default {
    data() {
      return {
        collectingState:1,
        linkDialog: {show: false},
        flowList: [],
        processId: null,
        cyclesList:[],
        activeCycles:'1',
        bloodText:'',
        visible2:false,
      }
    },
    props: {
      addProcessVisible: {
        type: Boolean,
        default: false
      },
      projectId: {
        type: String
      }, projectName: {
        type: String
      }
    },
    computed: {
      dialogVisible: {
        get: function () {
          return this.addProcessVisible
        },
        set: function () {
        }
      }
    },
    methods: {
      
      deleteProcess(row) {
        var vm = this;
        
        http.postData(vm, "/pt/process/del/" + row.id, {}, function (resp) {
          var ret = resp.body;
          if (ret.code === '111') {

            vm.$notify({title: '删除提示', message: ret.msg, type: 'success'});
            vm.onSubmit();
          } else {
            vm.$message({type: 'error', message: ret.msg});
          }
        });
      },
      top(sortNo, id) {
        var vm = this;
        http.postData(vm, "/pt/process/top/" + sortNo + "-" + id + "-" + vm.projectId, {}, function (resp) {
          var ret = resp.body;
          if (ret.code === '111') {
            vm.$message({title: '操作提示', message: ret.msg, type: 'success'});
            vm.onSubmit();
          } else {
            vm.$message({type: 'error', message: ret.msg});
          }
        })
      },
      bottom(sortNo, id) {
        var vm = this;
        http.postData(vm, "/pt/process/bottom/" + sortNo + "-" + id + "-" + vm.projectId, {}, function (resp) {
          var ret = resp.body;
          if (ret.code === '111') {
            vm.$message({title: '操作提示', message: ret.msg, type: 'success'});
            vm.onSubmit();
          } else {
            vm.$message({type: 'error', message: ret.msg});
          }
        })
      },
      up(sortNo, id) {
        var vm = this;
        http.postData(vm, "/pt/process/up/" + sortNo + "-" + id + "-" + vm.projectId, {}, function (resp) {
          var ret = resp.body;
          if (ret.code === '111') {
            vm.$message({title: '操作提示', message: ret.msg, type: 'success'});
            vm.onSubmit();
          } else {
            vm.$message({type: 'error', message: ret.msg});
          }
        })
      },
      down(sortNo, id) {
        var vm = this;
        http.postData(vm, "/pt/process/down/" + sortNo + "-" + id + "-" + vm.projectId, {}, function (resp) {
          var ret = resp.body;
          if (ret.code === '111') {
            vm.$message({title: '操作提示', message: ret.msg, type: 'success'});
            vm.onSubmit();
          } else {
            vm.$message({type: 'error', message: ret.msg});
          }
        })
      }, addLinkDialog(id_) {
        this.processId = id_;
        this.linkDialog.show = true;
      }, closeLinkDialog() {
        this.linkDialog.show = false;
      },
      loadCyclesList(){
        var vm = this;
        http.postData(vm, "/pt/process/cyclesList/" + vm.projectId,{}, function (resp) {
          var ret = resp.body;
          if (ret.code == '111') {
            vm.cyclesList = ret.value;
          }
        });
      },
      //添加采血点
      Addpoint(){
        var vm = this;
        
          
         
       
        this.$confirm('此操作一旦添加就无法更改, 请确认无误后点击确定。', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          http.postData(vm, "/pt/process/afterList", {proid:vm.projectId,cdata:vm.bloodText}, function (resp) {
          var ret = resp.body;
              console.log(resp);
              if (ret.code == '111') {
                // vm.collectingState=1;
                vm.closeDialog();
              vm.$message({type: 'success', message: "添加成功"});

              }else{
                // vm.collectingState=2;
                vm.$message({type: 'error', message: ret.msg});
              }

            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消确定'
          });          
        });
        
      },
      onSubmit() {
        var vm = this;
        /**
         * 加载流程设计信息
         */
        http.postData(vm, "/pt/process/beforeList", {proid:vm.projectId}, function (resp) {
          var ret = resp.body;
           console.log(resp);
          if (ret.code == '111') {
            vm.collectingState=2;
           vm.bloodText="";
            
          }else{
            vm.collectingState=1;
            http.postData(vm, "/pt/process/list/" + vm.projectId+'-'+vm.activeCycles, {}, function (resp) {
                var ret = resp.body;
                if (ret.code == '111') {
                  vm.flowList = ret.value;
                  // console.log(vm.flowList)
                  vm.loadCyclesList();
                }
              });
          }
        });
        
      },
      updateCyclesEmptyStomach(data){
        var vm = this;
        this.$confirm('将按周期的空腹状态设置为'+(data.emptyStomach==0?'非空腹':'空腹')+', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          http.postData(vm, "/pt/process/updateCyclesEmptyStomach/" + vm.projectId + '-' + data.cycles + '-' + data.emptyStomach, {}, function (resp) {
            var ret = resp.body;
//            if (ret.code == '111') {
              vm.loadCyclesList();
//            }else{
//              data.emptyStomach=data.emptyStomach==0?1:0;
//            }
          },function(err){data.emptyStomach=data.emptyStomach==0?1:0;});
        },()=>{
//          data.emptyStomach=data.emptyStomach==0?1:0;
          vm.loadCyclesList();
        });
      },
      closeDialog() {
        this.$parent.closeDesignDialog();
      },
      addOneCycles(){//添加一个周期
        var vm = this;
        this.$confirm('将按第一周期的流程复制, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          http.postData(vm, "/pt/process/createOneCycles/" + vm.projectId, {}, function (resp) {
            var ret = resp.body;
            if (ret.code == '111') {
              vm.onSubmit();
//            vm.loadCyclesList();
              vm.$message({type: 'success', message: ret.msg});
            } else {
              vm.$message({type: 'error', message: ret.msg});
            }
          });
        });
      },
      removeCycles(targetName){
        var vm=this;
        if(targetName=='1'){
          vm.$message({type: 'error', message:"周期1不能删除"});
          return;
        }
        this.$confirm('此操作将永久删除该周期节点, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          /**
           * 加载流程设计信息
           */
          http.postData(vm, "/pt/process/removeCycles/" + vm.projectId+'-'+vm.activeCycles, {}, function (resp) {
            var ret = resp.body;
            if (ret.code == '111') {
              vm.activeCycles='1';
              vm.onSubmit();
              vm.$message({type: 'success', message: ret.msg});
            }else {
              vm.$message({type: 'error', message: ret.msg});
            }
          });
        }).catch(() => {

        });
      },
      handleSizeChange(){
        this.form.pageNo = 1
        this.onSubmit()
      },
      handleCurrentChange(val) {
        this.form.pageNo = val
        this.onSubmit()
      }
    },
    components: {
      LinkDialog
    },
    created() {
      var vm = this;
//      vm.onSubmit();
//      vm.loadCyclesList();
      vm.$watch('activeCycles',function(newVal,oldVal){
        vm.onSubmit();
      })
    }
  }
</script>
<style type="text/css">
  .el-dialog--large{
    padding: 0 0 20px 0;
  }
  .format{
    color:#78c5a5;
    margin:5px 0 15px 0;
    font-size: 18px;
  }
</style>